<script>
    import _ from 'lodash'
    import { addRequest, updateRequest } from '@/api/measurDevice'
    import { findMeterTypeOptions, findMeterByMeterType } from '@/api/common'

    export default {
        name: 'FormModal',
        props: {
            title: String,
            rowData: Object,
        },
        data() {
            const rowData = this.rowData
            return {
                formData: {
                    virtually: rowData?.virtually || false,
                    id: rowData?.id || '',
                    name: rowData?.name || null,
                    code: rowData?.code || null,
                    typeId: rowData?.typeId || null,
                    model: rowData?.model || null,
                    brand: rowData?.brand || null,
                    containerNumber: rowData?.containerNumber || null,
                    parentId:
                        rowData?.parentId && rowData?.parentId !== '-1' ? rowData?.parentId : null,
                    projectId: rowData?.projectId || this.$store.state.projectId,
                },
                rules: {
                    virtually: [{ required: true, message: '请选择是否虚拟器具', trigger: 'blur' }],
                    code: [{ required: true, message: '请输入计量器具编码', trigger: 'blur' }],
                    name: [{ required: true, message: '请输入计量器具名称', trigger: 'blur' }],
                    typeId: [{ required: true, message: '请选择计量器具类型', trigger: 'change' }],
                },
                deviceTypeList: [],
                parentMeterOptions: [], // 父级计量
            }
        },
        created() {
            this.initSetModal()
            this.initData()
        },
        watch: {
            'formData.typeId': {
                handler(value) {
                    if (value) {
                        this.handleChangeMeter(value)
                    }
                },
                immediate: true,
            },
        },
        computed: {
            disabledType() {
                return !!(this.rowData && this.rowData.id)
            },
            showClose() {
                const quote = this.formData.quoteList
                return quote && quote.length > 1
            },
        },
        methods: {
            initData() {
                findMeterTypeOptions().then((resp) => {
                    this.deviceTypeList = resp.data
                })
            },
            initSetModal() {
                if (this.$props.rowData) {
                    this.$emit('SetTitle', '编辑')
                } else {
                    this.$emit('SetTitle', '新增')
                }
                this.$emit('SetPageWidth', 650)
                this.$emit('SetPageActions', [
                    {
                        text: '保存',
                        theme: 'primary',
                        handle: () => {
                            this.submitForm()
                        },
                        loading: false,
                    },
                    {
                        text: '取消',
                        theme: 'default',
                        handle: () => {
                            this.$emit('Close')
                        },
                    },
                ])
            },
            submitForm() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        //验证成功,发送请求
                        if (this.$props.rowData) {
                            //编辑更新
                            this.sendUpdateRequestFun()
                        } else {
                            //新增
                            this.sendAddRequestFun()
                        }
                    } else {
                        //验证失败
                    }
                })
            },
            /**
             * @name: 新增请求
             * @test: test font
             * @msg:
             * @return {*}
             */

            sendAddRequestFun() {
                addRequest({
                    ...this.formData,
                }).then((result) => {
                    if (result.code == 200) {
                        this.$message.success(result.msg)
                        this.$emit('Close', true)
                    }
                })
            },
            /**
             * @name: 编辑更新请求
             * @test: test font
             * @msg:
             * @return {*}
             */

            sendUpdateRequestFun() {
                const params = _.omit(this.formData, ['typeId', 'projectId'])
                updateRequest(params).then((result) => {
                    if (result.code == 200) {
                        this.$message.success(result.msg)
                        this.$emit('Close', true)
                    }
                })
            },
            handleChangeMeter(energyType) {
                findMeterByMeterType(this.$store.state.projectId, energyType).then(
                    ({ code, data }) => {
                        if (code === 200) {
                            this.parentMeterOptions = data
                        }
                    }
                )
            },

            handleClose(currentIndex) {
                this.$confirm('是否删除该计量器具?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        this.formData.quoteList = this.formData.quoteList.filter(
                            (item, index) => index !== currentIndex
                        )
                    })
                    .catch(() => {})
            },
            handleAdd() {
                this.formData.quoteList.push({ meter: '', points: '' })
            },
        },
    }
</script>
<template>
    <el-form label-position="top" :model="formData" :rules="rules" ref="ruleForm">
        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="是否虚拟器具" prop="virtually">
                    <el-select
                        v-model="formData.virtually"
                        :clearable="false"
                        placeholder="请选择"
                        style="width: 100%"
                        :disabled="disabledType"
                    >
                        <el-option :value="true" label="是" />
                        <el-option :value="false" label="否" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="计量器具名称" prop="name">
                    <el-input placeholder="请输入" v-model="formData.name" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="计量器具编码" prop="code">
                    <el-input placeholder="请输入" v-model="formData.code" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="计量器具类型" prop="typeId">
                    <el-select
                        v-model="formData.typeId"
                        clearable
                        filterable
                        :disabled="disabledType"
                        placeholder="请选择类型"
                        transfer
                        style="width: 100%"
                    >
                        <el-option
                            v-for="item in deviceTypeList"
                            :key="item.code"
                            :value="item.code"
                            :label="item.name"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="父级计量器具">
                    <el-select
                        v-model="formData.parentId"
                        clearable
                        filterable
                        placeholder="请选择"
                        transfer
                        style="width: 100%"
                    >
                        <el-option
                            v-for="item in parentMeterOptions"
                            :key="item.value"
                            :value="item.value"
                            :label="item.key"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="计量器具品牌">
                    <el-input placeholder="请输入" v-model="formData.brand" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="计量器具型号">
                    <el-input placeholder="请输入" v-model="formData.model" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="计量器具柜号">
                    <el-input placeholder="请输入" v-model="formData.containerNumber" clearable />
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
<style lang="scss">
    .customFormItem {
        .el-form-item__label {
            display: none !important;
        }
    }
</style>
